html, body, div, p, h2 {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.img-response {
  display: block;
  max-width: 100%;
}

.body {
  height: 100%;
  background: #00b3a9;
  .stage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .scene {
    width: 100%;
    height: 100%;
  }

  .scene-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.875rem;
    color: #fff;

    img {
      width: 16vw;
    }

    h2 {
      font-size: 1.875rem;
      color: #fff;

      span, img {
        display: inline-block;
        vertical-align: baseline;
      }

      img {
        width: 6vw;
        margin-left: -10px;
        vertical-align: bottom;
      }
    }
  }
  .scene-text {
    display: flex;
    justify-content: center;
    align-items: center;

    .texts {
      text-align: center;
      .char {
        display: inline-block;
      }
    }
  }

  .scene3 {
    .crack {
      width: 100%;
      height: 100%;
      opacity: 0;
      background: #00b3a9 url(../img/crack.jpg) center center / contain no-repeat;
    }

    .text {
      position: absolute;
    }
  }

  .scene4 {
    width: 200%;
    display: flex;
    overflow: hidden;

    .s4t1 {
      width: 75%;
    }

    .s4t2 {
      width: 87.5%;
    }

    .s4plane {
      width: 84%;
      height: 30vw;
      margin-top: 15%;
      margin-bottom: 15%;
      position: relative;
      .plane {
        width: 79%;
        margin-left: 20%;
      }
    }

    .s4hand {
      width: 8%;
      position: absolute;
      right: 10%;
      bottom: 30%;
    }

    .s4tail {
      width: 19%;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .left, .right {
      flex: 1;
      height: 100%;
      background: #00b3a9;
      overflow: hidden;
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .map {
      width: 160%;
      position: relative;

      .path {
        opacity: 0;
        width: 38%;
        position: absolute;
        top: 32%;
        left: 50%;
        transform: rotate(6deg);
        transition: opacity 0.3s ease;

        &.show {
          opacity: 1;
        }
      }

      .plane-icon {
        width: 6.1%;
        position: absolute;
        top: 25%;
        left: 44%;
        transform: rotate(-27deg);
      }
    }
  }

  .scene5 {
    @keyframes s5fly {
      0% {
        transform: translateX(-150%);
      }
      15% {
        transform: translateX(-150%);
      }
      85% {
        transform: translateX(1800%);
      }
      100% {
        transform: translateX(1800%);
      }
    }

    padding-top: 10%;
    box-sizing: border-box;
    background: url(../img/s5bg.jpg) center top / cover no-repeat;

    .s5plane {
      width: 6.25%;
      margin-bottom: 1rem;
      animation: s5fly 3s infinite;
    }

    .s5text {
      width: 59%;
      margin: 0 auto;
    }

    @keyframes scale {
      0% {
        transform: translateX(-50%) scale(0.9, 0.9);
      }
      50% {
        transform: translateX(-50%) scale(1, 1);
      }
      100% {
        transform: translateX(-50%) scale(0.9, 0.9);
      }
    }

    .s5btn {
      width: 70%;
      position: absolute;
      left: 50%;
      bottom: 5%;
      transform: translateX(-50%);
      animation: scale 3s ease-in-out infinite;
    }
  }

  .scene6 {
    .s6-nav {
      width: 6vw;
      height: auto;
      position: fixed;
      right: 3%;
      top: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 29;

      .dot {
        margin: 0 10px 6px 0;
        position: relative;
      }
    }

    .hint {
      width: 81vw;
      height: 18vw;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 5px;
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -100%);
      z-index: 29;
      color: #fff;
      text-align: center;

      .text {
        width: 60%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
      }

      .arrow {
        width: 9%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      .arrow-left {
        left: 10%
      }

      .arrow-right {
        right: 10%
      }
    }

    .dot {
      width: 20px;
      height: 20px;
      position: absolute;

      @keyframes ripple {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .outer {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.7);
        animation: ripple 1.5s linear infinite;
      }

      .inner {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &:after {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .dot1 {
      top: 10px;
      right: 4%;
      z-index: 19;
    }

    .dot2 {
      top: 5%;
      left: 33%;
    }

    @keyframes hand {
      0% {
        transform: translateY(0);
      }
      35% {
        transform: translateY(-30%);
      }
      70% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(0);
      }
    }

    .hand {
      width: 6vw;
      animation: hand 1.5s infinite;
    }

    .scroll {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .map {
      height: 100vh;
      position: relative;
    }

    .s6map1 {
      background: url(../img/s6map1.jpg) center center / cover no-repeat;
    }

    .s6map2 {
      background: url(../img/s6map2.jpg) center center / cover no-repeat;
    }

    .center {
      width: 100vw;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .text {
        padding: 0.7rem 1rem;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        color: #fff;
      }
    }

    @keyframes flow {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(15px);
      }
      100% {
        transform: translateY(0);
      }
    }

    @keyframes swimming {
      0% {
        transform: translate(-50%, 0) scale(3, 3);
        opacity: 0;
      }
      80% {
        transform: translate(-50%, 50px) scale(0, 0);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, 50px) scale(0, 0);
        opacity: 1;
      }
    }

    .turtle {
      width: 67vw;
      position: relative;

      .img-turtle {
        animation: flow 3s ease-in-out infinite;
        z-index: 5;
      }
    }

    .man {
      width: 30vw;
      position: absolute;
      left: 115%;
      top: 10%;
      //animation: flow 3s ease-in-out 0.4s infinite;
    }

    .woman {
      width: 32vw;
      position: absolute;
      right: 115%;
      top: 12%;
      //animation: flow 3s ease-in-out 0.8s infinite;
    }

    .fish {
      width: 160vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 0);
      //animation: swimming 5s ease-in-out infinite;
    }

    .s6text1 {
      display: none;
      width: 35vw;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-100%, -50%);
    }

    .s6text2 {
      display: none;
      width: 26vw;
      position: absolute;
      top: 22%;
      left: 38%;
      transform: translate(0, 0);
    }

    .s6map2dot2 {
      top: 22%;
      left: 31%;
    }
  }

  .scene7 {
    background: #000;

    .s7video {
      //margin-top: 44px;
    }

    .bottom {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;

      .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 29;
      }
    }

    .slogans {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      transition: transform 0.3s linear;

      img {
        margin-left: auto;
        margin-right: auto;
      }
    }

    .s7slogan {
      width: 71.25%;
      margin-top: 3rem;
    }

    .s7bar {
      width: 80%;
    }

    .s7text {
      margin-top: 1.5rem;
    }

    .btns {
      width: 80%;
      margin: 0 auto 1rem;
    }

    .s7btn {
      margin-bottom: 0.7rem;
      display: block;
      border: none;
    }

    .s7logos {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      width: 80%;
    }

    .s7share {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 99;

      .share-text {
        width: 10.6%;
        height: auto;
        position: absolute;
        right: 30px;
        top: 10px;
      }
    }

    .s7img1 {
      height: 100%;
      background: url('../img/s7img1.jpg') center center / cover no-repeat;
    }

    .s7img2 {
      height: 100%;
      background: url('../img/s7img2.jpg') center center / cover no-repeat;
    }

    &.hide {
      z-index: -1;
      width: 0;
      height: 0;
    }
  }

  .scene8 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: url(../img/s8bg.jpg) center center / cover no-repeat;

    .s8text1 {
      width: 89%;
      margin-top: 1rem;
    }

    .s8text2 {
      width: 56%;
      margin-bottom: 1rem;
    }

    .s8btn {
      display: block;
      width: 66%;
      border: none;
    }

    .s8coupon {
      display: block;
      width: 77%;
      margin: 1rem 0;
      border: none;
    }
  }
}